<template>
  <body>
    <div class="top">
      <div style="height: 8px"></div>
      <el-button
        style="margin-left: 15%; margin-right: 45%;"
        type="primary"
        icon="el-icon-s-home"
        size="medium"
        plain
        @click="toMyQuestionnaire"
      >
        返回我的问卷
      </el-button>
      <el-button
        type="primary"
        icon="el-icon-s-data"
        size="medium"
        plain
        @click="toStatistics"
      >
        查看统计结果
      </el-button>
      <el-button
        type="primary"
        icon="el-icon-download"
        size="medium"
        plain
        @click="downloadExcel"
      >
        下载答卷数据
      </el-button>
      <div style="height: 8px"></div>
      <hr />
    </div>

    <div style="height: 110px"></div>

    <div
      v-show="message==='none'"
      style="width: 60%; text-align: center; margin: 0 auto"
    >
      您的问卷还没有答卷！
    </div>
    
    <div class="headline" v-show="message==='notNone'">
        <span>{{ headline }}</span>
    </div>

    <div style="width: 60%; margin: 0 auto;" v-show="message==='notNone'">

      <div style="height: 40px"></div>

      <el-table
        :data="answers"
        height="450"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="index"
          label="序号"
          width="200"
          sortable
        ></el-table-column>
        <el-table-column
          prop="date"
          label="提交时间"
          width="360"
        ></el-table-column>
        <el-table-column
          prop="grade"
          label="总分"
          width="80"
          v-if="type==='EXAM'"
        ></el-table-column>

        <el-table-column label="操作">
          <el-link
            type="primary"
            slot-scope="scope"
            @click="toPersonalAnswer(scope.$index)"
          >
            查看详情
          </el-link>
        </el-table-column>


      </el-table>
    </div>

    <div style="height: 70px"></div>

    
    <div v-show="false">
      <el-table
        :data="answers"
        border
        style="width: 100%"
        id="answers"
      >
        <el-table-column
          prop="index"
          label="序号"
          width="200"
          sortable
        ></el-table-column>
        <el-table-column
          prop="date"
          label="提交时间"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="grade"
          label="总分"
          width="40"
          v-if="type==='EXAM'"
        ></el-table-column>
        <el-table-column
          v-for="(problem,index) in questions"
          :key="index"
          :label="index+1+'：'+problem.title+'【'+problem.type+'】'"
          width="200"
          prop="answer[index]"
        >
          <p slot-scope="scope">
            {{ scope.row.answer[index].a }}
          </p>
        </el-table-column>

      </el-table>

    </div>


  </body>
</template>

<script>

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

export default {

  name: 'Answers',
  component: {},

  data() {
    return {

      message: "none",

      is_loading: true,

      id: "",

      type: "",

      headline: "",

      questions: [],

      answers: []

    }
  },

  mounted() {
    this.is_loading = true;
    this.id = this.$route.query.id;
    var that = this;
    this.axios.get("/result/analyzeAll",{qnid: this.id}).then(
      function(response) {
        that.message = response.data.data.message;

        if (that.message === "notNone") {
          that.headline = response.data.data.headline;
          that.type = response.data.data.type;
          response.data.data.questions.forEach((q) => {
            that.questions.push(q);
          })
          that.questions.forEach((question) => {
            if (question.type === "RADIO") question.type = "单选题";
            else if(question.type === "CHECKBOX") question.type = "多选题";
            else if(question.type === "INPUT") question.type = "填空题";
            else if(question.type === "RATING") question.type = "评分题";
          })
          response.data.data.answers.forEach((a) => {
            that.answers.push(a)
          })
        }

      },
      function () {  }
    )
    .finally(() => this.is_loading = false)
  },

  methods: {

    toMyQuestionnaire: function() {
      this.$router.push('/manage');
    },

    toStatistics: function() {
      this.$router.push({path: '/statistics', query: {id: this.id}});
    },

    toPersonalAnswer: function(i) {
      let url = this.$router.resolve({
          path: "/personalAnswer",
          query: {index: i, id: this.id}
      });
     window.open(url .href, '_blank');
    },



    downloadExcel: function() {
      // 生成Excel工作簿对象
        var wb = XLSX.utils.table_to_book(document.getElementById("answers"), {raw:true});
        // 获取二进制字符串作为输出
        var wbout = XLSX.write(wb, {
          bookType: 'xlsx',
          book: true,
          type: 'array',
        })
        try {
          FileSaver.saveAs(
          // Blob: 对象表示一个不可变 原始数据的类文件对象,不一定是JS原生格式的数据。
          // File: 基于Blob，继承了blob的功能并将其扩展使其支持用户系统上的文件。  
            new Blob([wbout], { type: 'appliction/octet-stream' }),
            // 设置导出的文件名称可随意
            '答卷数据.xlsx'
          )
        } catch (e) {
          if (typeof console != 'undefined') console.log(e, wbout);
        }
        // 返回一个新创建的Blob对象，其内容由参数中给定的数组串联组成。
        return wbout;
    },

    

  }
}
</script>

<style>

  .top {
    width: 100%;
    height: 54px;
    position: fixed;
    top: 0;
    background-color: #fff;
    z-index: 999;
  }

  .headline {
    width: 50%;
    margin: 0 auto;
    text-align: center;
    font: normal bold 35px serif;
  }

</style>